<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>零食销售额动态折线图</title>
        <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    </head>
    <body>
        <div id="main" style="width: 100%; height: 800px"></div>
        <script>
            var chartDom = document.getElementById("main");
            var myChart = echarts.init(chartDom);
            var option;

            const data = {
                薯片: [
                    800, 838, 879, 921, 965, 1012, 1061, 1112, 1165, 1221, 1280,
                    1341, 1406, 1474, 1545, 1619, 1697, 1778, 1864, 1954, 2048,
                    2146, 2249, 2358, 2471, 2590, 2715, 2845, 2982, 3126, 3276,
                    3434, 3599, 3772, 3953, 4144, 4343, 4552, 4771, 5000, 5241,
                    5493, 5757, 6034, 6325, 6629, 6948, 7282, 7633, 8000,
                ],
                巧克力: [
                    2500, 2649, 2792, 2923, 3038, 3131, 3199, 3239, 3250, 3230,
                    3182, 3106, 3007, 2887, 2751, 2606, 2456, 2308, 2168, 2041,
                    1932, 1846, 1786, 1755, 1753, 564, 570, 583, 602, 625, 651,
                    677, 701, 723, 740, 752, 758, 757, 748, 732, 709, 680, 646,
                    608, 566, 523, 479, 436, 395, 356,
                ],
                果冻: [
                    520, 587, 676, 636, 712, 687, 818, 790, 913, 1227, 1297,
                    913, 989, 1192, 1765, 1523, 1576, 1393, 1605, 2139, 1388,
                    1723, 1179, 2090, 1233, 1813, 1237, 2311, 2422, 1564, 2283,
                    1631, 2513, 1594, 2270, 1522, 2380, 1397, 2441, 1265, 1151,
                    1472, 1699, 2135, 2601, 2590, 2192, 2381, 1967, 1277,
                ],
                饼干: [
                    1151, 1257, 1258, 1212, 1221, 1246, 1257, 1310, 1260, 1256,
                    1296, 1354, 1365, 1402, 1419, 1353, 1396, 1401, 1448, 1378,
                    1446, 1425, 1505, 1520, 1515, 1487, 1504, 1579, 1557, 1493,
                    1539, 1512, 1568, 1635, 1588, 1656, 1680, 1702, 1604, 1655,
                    1675, 1644, 1752, 1691, 1737, 1753, 1711, 1729, 1817, 1761,
                ],
                糖果: [
                    1500, 1589, 1675, 1754, 1823, 1879, 1919, 1943, 1950, 1938,
                    1909, 1864, 1804, 1732, 1651, 1564, 1474, 1385, 1301, 1225,
                    1159, 1108, 1072, 1053, 1052, 338, 342, 350, 361, 375, 390,
                    406, 421, 434, 444, 451, 455, 454, 449, 439, 426, 408, 388,
                    365, 340, 314, 287, 262, 237, 214,
                ],
                坚果: [
                    1500, 1605, 1688, 1825, 1988, 2766, 2264, 3319, 2399, 2719,
                    3101, 4155, 3150, 3406, 4244, 3283, 4758, 3765, 6073, 4383,
                    4966, 3358, 4506, 5036, 5725, 4788, 5342, 5856, 3714, 6261,
                    3665, 7048, 4979, 5383, 5836, 5335, 8039, 4264, 6156, 4534,
                    5136, 5931, 8011, 3952, 4189, 4040, 7557, 5868, 6439, 4167,
                ],
                瓜子: [
                    665, 729, 707, 725, 698, 718, 739, 720, 765, 766, 753, 785,
                    756, 800, 779, 809, 817, 790, 819, 867, 852, 878, 821, 854,
                    855, 898, 903, 889, 863, 883, 912, 891, 899, 963, 937, 946,
                    923, 939, 960, 982, 995, 975, 1026, 1015, 1042, 1039, 1030,
                    1054, 1009, 1046,
                ],
                辣条: [
                    431, 494, 553, 610, 642, 784, 713, 640, 676, 822, 880, 809,
                    1230, 1195, 1359, 1221, 1250, 1345, 1095, 1123, 1048, 1549,
                    1694, 1636, 1826, 1317, 1299, 1016, 1727, 1060, 1729, 1249,
                    1997, 982, 1796, 1967, 944, 1091, 2009, 968, 1403, 2133,
                    976, 1257, 1904, 2048, 964, 1950, 1734, 2303,
                ],
            };

            const dates = [
                "2024/11/23",
                "2024/11/24",
                "2024/11/25",
                "2024/11/26",
                "2024/11/27",
                "2024/11/28",
                "2024/11/29",
                "2024/11/30",
                "2024/12/1",
                "2024/12/2",
                "2024/12/3",
                "2024/12/4",
                "2024/12/5",
                "2024/12/6",
                "2024/12/7",
                "2024/12/8",
                "2024/12/9",
                "2024/12/10",
                "2024/12/11",
                "2024/12/12",
                "2024/12/13",
                "2024/12/14",
                "2024/12/15",
                "2024/12/16",
                "2024/12/17",
                "2024/12/18",
                "2024/12/19",
                "2024/12/20",
                "2024/12/21",
                "2024/12/22",
                "2024/12/23",
                "2024/12/24",
                "2024/12/25",
                "2024/12/26",
                "2024/12/27",
                "2024/12/28",
                "2024/12/29",
                "2024/12/30",
                "2024/12/31",
                "2025/1/1",
                "2025/1/2",
                "2025/1/3",
                "2025/1/4",
                "2025/1/5",
                "2025/1/6",
                "2025/1/7",
                "2025/1/8",
                "2025/1/9",
                "2025/1/10",
                "2025/1/11",
            ];

            option = {
                animationDuration: 10000,
                dataset: {
                    source: [
                        [
                            "date",
                            "薯片",
                            "巧克力",
                            "果冻",
                            "饼干",
                            "糖果",
                            "坚果",
                            "瓜子",
                            "辣条",
                        ],
                    ],
                },
                title: {
                    text: "零食销售额变化趋势",
                },
                tooltip: {
                    order: "valueDesc",
                    trigger: "axis",
                },
                xAxis: {
                    type: "category",
                    nameLocation: "middle",
                },
                yAxis: {
                    name: "销售额 (元)",
                },
                grid: {
                    right: 200,
                },
                series: [
                    {
                        name: "薯片",
                        type: "line",
                        smooth: true,
                        showSymbol: false,
                        emphasis: {
                            focus: "series",
                        },
                        endLabel: {
                            show: true,
                            formatter: "{a}: {@[1]} 元",
                        },
                    },
                    {
                        name: "巧克力",
                        type: "line",
                        smooth: true,
                        showSymbol: false,
                        emphasis: {
                            focus: "series",
                        },
                        endLabel: {
                            show: true,
                            formatter: "{a}: {@[2]} 元",
                        },
                    },
                    {
                        name: "果冻",
                        type: "line",
                        smooth: true,
                        showSymbol: false,
                        emphasis: {
                            focus: "series",
                        },
                        endLabel: {
                            show: true,
                            formatter: "{a}: {@[3]} 元",
                        },
                    },
                    {
                        name: "饼干",
                        type: "line",
                        smooth: true,
                        showSymbol: false,
                        emphasis: {
                            focus: "series",
                        },
                        endLabel: {
                            show: true,
                            formatter: "{a}: {@[4]} 元",
                        },
                    },
                    {
                        name: "糖果",
                        type: "line",
                        smooth: true,
                        showSymbol: false,
                        emphasis: {
                            focus: "series",
                        },
                        endLabel: {
                            show: true,
                            formatter: "{a}: {@[5]} 元",
                        },
                    },
                    {
                        name: "坚果",
                        type: "line",
                        smooth: true,
                        showSymbol: false,
                        emphasis: {
                            focus: "series",
                        },
                        endLabel: {
                            show: true,
                            formatter: "{a}: {@[6]} 元",
                        },
                    },
                    {
                        name: "瓜子",
                        type: "line",
                        smooth: true,
                        showSymbol: false,
                        emphasis: {
                            focus: "series",
                        },
                        endLabel: {
                            show: true,
                            formatter: "{a}: {@[7]} 元",
                        },
                    },
                    {
                        name: "辣条",
                        type: "line",
                        smooth: true,
                        showSymbol: false,
                        emphasis: {
                            focus: "series",
                        },
                        endLabel: {
                            show: true,
                            formatter: "{a}: {@[8]} 元",
                        },
                    },
                ],
                legend: {
                    right: 10,
                    top: "center",
                    orient: "vertical",
                },
            };

            for (let i = 0; i < dates.length; i++) {
                const row = [dates[i]];
                Object.keys(data).forEach((key) => {
                    row.push(data[key][i]);
                });
                option.dataset.source.push(row);
            }

            option && myChart.setOption(option);
        </script>
    </body>
</html>
